<!--
 * @Description: 被邀请人列表
 * @Author: Kerwin
 * @Date: 2024-01-31 11:10:19
 * @LastEditTime: 2024-10-09 17:38:17
 * @LastEditors:  Please set LastEditors
-->
<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  onReachBottom,
  onShareAppMessage,
  onLoad,
  onPullDownRefresh,
  onShareTimeline,
  onPageScroll
} from '@dcloudio/uni-app'
import { userApi } from '@/api'
import { getImgFullPath } from '@/utils'
import { useConfigStore, useUserStore } from '@/store'
import { sharePathFormat } from '@/common/wechat-share'
import { RY_AVATAR } from '@/common/config'

const configStore = useConfigStore()
const userStore = useUserStore()
const status = ref('loadmore')

// 分享
const shareData = ref({})
const shareComp = ref()
function setShareData(params: any) {
  const data = params
  shareData.value = {
    title: '一码人脉',
    desc: '一码人脉招募令',
    imgUrl:
      '',
    link: sharePathFormat({
      redirect_url: '/pages/index/index'
    })
  }
}
function showShare(data) {
  setShareData(data)
  shareComp.value.showPop()
}
// 拼团列表
const dataList = reactive({
  pageIndex: 1,
  pageSize: 18,
  list: [],
  total: 0
})
const getDataList = async () => {
  if (status.value === 'nomore') return
  status.value = 'loading'
  uni.showLoading()
  const { data } = await userApi.userList({
    pageIndex: dataList.pageIndex,
    pageSize: dataList.pageSize,
    detail: 'true',
    parentId: 0,
    inviteCode: userStore.userInfo.shareCode
  }).finally(() => {
    uni.hideLoading()
  })
  const { records, current, pages, total } = data
  dataList.total = total
  dataList.list.push(...records)
  if (current < pages) {
    dataList.pageIndex += 1
  } else {
    status.value = 'nomore'
  }
}

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
onReachBottom(() => {
  getDataList()
})
onLoad(async (option) => {
  if (!userStore.checkLoginState()) return
  getDataList()
})
onShareAppMessage(() => {
  return shareData.value
})
onShareTimeline(() => {
  return shareData.value
})
onPullDownRefresh(() => {
  setTimeout(async () => {
    dataList.pageIndex = 1
    dataList.pageSize = 18
    dataList.list = []
    status.value = 'loading'
    await getDataList().finally(() => {
      uni.stopPullDownRefresh()
    })
  }, 1000)
})
</script>
<template>
  <view class="empty" v-if="!dataList.list.length">
    <u-empty text="还没有邀请记录" mode="history" margin-top="80"></u-empty>
  </view>
  <template v-else>
    <view class="topBox">
      <view>已邀请：{{ dataList.total }}名好友</view>
      <u-icon name="plus-circle" :size="44" @click="showShare"></u-icon>
    </view>
    <view
      class="c_container"
      :class="{ preview: !userStore.checkLoginState() }"
    >
      <hy-share ref="shareComp" :shareData="shareData" :useInnerGroup="false" />
      <view class="shop" v-for="data in dataList.list" :key="data.id">
        <view class="contentBox">
          <view class="imgCover">
            <u-image
              class="img"
              border-radius="10rpx"
              :src="data?.avatar ? getImgFullPath(data?.avatar) : RY_AVATAR"
              height="95rpx"
              width="95rpx"
              :lazy-load="true"
              mode="scaleToFill"
            />
          </view>
          <view class="content">
            <text class="name">{{ data?.nickname }}</text>
            <text class="remark">{{ data?.username }}</text>
            <view class="actionBox"> </view>
          </view>
        </view>
      </view>
      <u-back-top :scroll-top="scrollTop"></u-back-top>
      <u-loadmore :status="status" v-show="userStore.checkLoginState()" />
    </view>
  </template>
</template>

<style lang="scss" scoped>
@import '@/styles/helper.scss';

.topBox {
  padding: 20rpx 30rpx;
  background: #fff;
  position: sticky;
  top: 0;
  /* #ifdef H5 */
  top: 80rpx;
  /* #endif */
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  align-items: center;
  font-size: 30rpx;
}

.c_container {
  padding: 0 30rpx calc(30rpx + env(safe-area-inset-bottom)) 30rpx;
  margin-top: 20rpx;

  &.preview {
    padding: 0 0 calc(30rpx + env(safe-area-inset-bottom)) 0;
  }

  .shop {
    border-radius: $section-raduis;
    background: $uni-bg-color-white;
    margin-bottom: $uni-spacing-col-lg;
    padding: 20rpx;

    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .avatars {
        padding-left: 50rpx;
        position: relative;
        height: 70rpx;

        image {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          background-color: #f6f6f6;
          flex-shrink: 0;
          position: absolute;
          left: 0;
          z-index: 0;
        }
      }

      .count {
        font-size: 20rpx;
        border-radius: 20rpx;
        background-color: $bg-primary;
        color: #fff;
        padding: 6rpx 18rpx;
        margin-bottom: -6rpx;
        margin-top: 5rpx;
        position: relative;
        z-index: 2;
      }
    }

    .contentBox {
      display: flex;

      .imgCover {
        position: relative;
        flex-shrink: 0;
        margin-right: 20rpx;

        .img {
          width: 100%;
          // height: 200rpx;
          border-radius: $section-raduis;
        }
      }

      .content {
        position: relative;
        flex: 1;
        text-align: left;

        .name {
          font-size: 32rpx;
          width: 75%;
          display: inline-block;
        }

        .remark {
          @include ellipsis;
          color: $uni-text-color-light;
          font-size: 24rpx;
          margin-top: 10rpx;
        }

        .vip {
          position: absolute;
          right: 0;
          top: 0;
          border: 1px solid $uni-text-color-red;
          color: $uni-text-color-red;
          font-size: 18rpx;
          padding: 5rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>
